<template>
	<view class="">
		<view class="ui-modal_box f-cb" v-if="open">
			<rich-text :nodes="nodes"></rich-text>
			<view class="btnbox" @click="handleClose">知道了</view>
		</view>
		<view class="overlay"  @click="handleClose" v-if="open"></view>
	</view>	
</template>

<script>
	import parserHtml from "@/Grace6/js/parserHTML.js";
	export default {
		name: "dialog",
		data() {
			return {
				open:false,
				nodes:[],
				xyhtml: `<div class="markdown-body"><div class="privacy-dialog">
					  <div class="">
						<h3 style="text-align:center;">感谢您使用学习512！</h3>
						<p>为了更好地保障您的个人权益，请认真阅读<a target="_blank" href="//reg.163.com/agreement_wap.shtml?v=20171127">《使用协议》</a>、<a target="_blank" href="//study.163.com/topics/privacy_policy">《隐私政策》</a>和<a target="_blank" href="//study.163.com/topics/protocol_20005/">《服务条款》</a>的全部内容，同意并接受全部条款后开始使用我们的产品和服务。</p>
						<p>若不同意，将无法使用我们的产品和服务。</p>
					  </div>
					</div>
				</div>`
			};
		},
		created() {
			this.nodes = parserHtml.parserHTML(this.xyhtml)
		},
		methods:{
			handleClose(){
				this.open = false
			},
			handleOpen(){
				this.open = true
			}
		}
	}
</script>

<style scoped lang="scss">
.markdown-body{padding: 20px;}
.ui-modal_box{overflow-y: auto;
	position: fixed;z-index: 1000;background: #fff;top:150px;box-shadow: 0 0 1em #ccc;width: 80%;
	left:10%;
}
.ui-modal_box+.overlay{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: rgba(0,0,0,.3);
}
.ui-modal_box .btnbox{
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 10px;
	text-align: center;
	font-size:14px;
	font-weight: bold;
	color:#36B378;
	border-top: 1px solid #eee;
}
</style>